<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>
   <%@include file="/WEB-INF/jsp/component/commonHead.jsp" %>
   <link href="${css}/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
   <style type="text/css">
    body{
     background-color:#fff;
    }
   </style>
</head>

<body id="body" >
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">家庭信息列表</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                       家庭信息列表
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">

                        <div class="form-inline" style="" >
                            <div class="form-group">
                                <label for="mkFamilyNo">档案编号:</label>
                                <input type="text" class="form-control" id="mkFamilyNo"  placeholder="档案编号">
                            </div>
                            <button  class="btn btn-primary" onclick="selectData(1)">查找</button>
                        </div>
<br/>
                        <div class="dataTable_wrapper">
                            <table class="table table-striped table-bordered table-hover" id="examList">
                                <thead>
                                <tr>
								    <th style="display:none">序号</th>
                                    <th>美康编号</th>
                                    <th>家庭编号</th>
                                    <th>户主身份证</th>
                                    <th>户主姓名</th>
                                    <th>家庭类型</th>
                                    <th>人口数</th>
                                </tr>
                                </thead>
                                <tbody>
                               
                                </tbody>
                                <tfoot>
                                <tr>
                                 <td class="last" colspan="7" id="twbsPagination" ><ul id="examListPage" class="pagination-sm" style="margin:0px;line-height: 25px"></ul></td>
                                </tr>
                                </tfoot>
                            </table>
                            <div></div>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    <!-- /#page-wrapper -->
<%@include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
<script src="${dean}/js/baseDell.js"></script>
    <!-- DataTables JavaScript -->
    <script src="${js}/jquery.twbsPagination.min.js"></script>
    <script src="${js}/bootstrap-dateTime/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="${js}/bootstrap-dateTime/locales/bootstrap-datetimepicker.zh-CNxyc.js" ></script>
    <script>
    var startPage = 1;
	var totalPages = 0;
	$(document).ready(function(){
    	initTable();
    	selectData();
    	 $(".date").datetimepicker({
    	        language:  'zh-CN',
    	        weekStart:  0,
    	        todayBtn: true,
    	        autoclose:  1,
    	        todayHighlight: 1,
    	        startView: 2,
    	        minView: 2,
    	        forceParse: 0
    	 });
    });
   
    function initTable(){
    	$('#examList').dataTable({
    		    "bInfo": false, //页脚信息
    		    "bPaginate":false, //分页
    		    "bFilter": false, //过滤功能
    			"aoColumns":[
					{ "mData": "id" ,
					  "orderable": false,
					  "bVisible": false,
					  "sDefaultContent" : "",
					},
					{ "mData": "mkFamilyNo",
					  "orderable": true,
					  "sDefaultContent" : ""
					},
					{ "mData": "familyNo",
		              "orderable": false ,
		              "sDefaultContent" : ""
					},
					{ "mData": "houseHolderIdCard",
		               "orderable": false,
		               "sDefaultContent" : ""
		            },
					{ "mData": "houseHolderName",
		               "orderable": false,
		               "sDefaultContent" : ""
					},
					{ "mData": "familyKindCode",
		               "orderable": false,
		               "sDefaultContent" :""
					},
					{ "mData": "peopleCount",
		               "orderable": false,
		               "sDefaultContent" : ""
					}
				],
				"aaSorting" : [[1, "desc"]] 
    	  });
    }
    
    var page_size = totalPages;
    function examListPage(totalPages, startPage) {
		$("#examListPage").twbsPagination({
			totalPages : totalPages,
			startPage : startPage,
			visiblePages : 5,
			first : '首页',
			last : '末页',
			prev : '上一页',
			next : '下一页',
			onPageClick : function(event, page) {
				startPage = page;
				selectData(startPage);
			}
		});
	}
    
    function selectData(startPage){
    	var ajaxUrl = "${ctx}/familyInformation/findInformations";
    	var mkFamilyNo = $("#mkFamilyNo").val();
    	
      	$.ajax({
    	    type:"post",
    	    url:ajaxUrl,
    	    data:{
    	    	size : 8, //每页条数
				page : startPage, //当前页
				mkFamilyNo : mkFamilyNo
    	    },
    	    dataType: "json",
    	    success:function(json){
    	    	//var da = JSON.stringify(json);
				//$("#content").html(da);
    	    	if(page_size!=json.page.totalPages){  
			        $("#twbsPagination").html('<ul id="examListPage" class="pagination-sm" style="margin:0px;line-height: 25px"></ul>');  
			    } 
    	    	totalPages = json.page.totalPages;
    	    	page_size = totalPages;
				startPage = json.page.number + 1;
				if(totalPages==0||totalPages=="0"){
					$("#examList").dataTable().fnClearTable();
				}else{
					$("#examList").dataTable().fnClearTable();
					$("#examList").dataTable().fnAddData(json.page.content,true);
				}
				examListPage(totalPages, startPage);
    	    },
    	    complete:function () {
                //修改iframe高度
                reSizeParentIframe();
            }
    	});
    }
    function showDetail(idCard,code){
    	 var pMenuId = "examReports";
		 var url = "${ctx}/Exam/showDetail?idCard="+idCard+"&mkCode="+code+"&pMenuId="+pMenuId;
		 window.location.href = url;
	}
    </script>
</body>
</html>